<template>
    <div class="mypassword">
        <el-breadcrumb separator="/" class="header">
            <el-breadcrumb-item>修改密码</el-breadcrumb-item>
        </el-breadcrumb>

        <el-alert title="密码更新成功以后，您将被重定向到登录页面，您可以使用新密码登录" type="primary" show-icon closable />
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="mt-4">
            <el-form-item label="当前密码" prop="oldPassword">
                <el-input v-model="form.oldPassword" type="password" placeholder="请输入当前密码" />
                <div class="form-tip">必须提供当前登录用户密码才能进行更改</div>
            </el-form-item>
            <el-form-item label="*新密码" prop="newPassword">
                <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" />
                <div class="form-tip">请输入8位以上密码</div>
            </el-form-item>
            <el-form-item label="确认新密码" prop="rawPassword">
                <el-input v-model="form.rawPassword" type="password" placeholder="请在此输入新密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../../stores/auth'
import { updatePassword } from '../../../api/auth'

const authStore = useAuthStore()

const router = useRouter()
const formRef = ref(null)
const form = ref({
    oldPassword: '',
    newPassword: '',
    rawPassword: ''
})

const rules = ref({
    oldPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 8, message: '新密码长度至少为8位', trigger: 'blur' }
    ],
    rawPassword: [
        { required: true, message: '请输入确认新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.value.newPassword) {
                    callback(new Error('确认密码与新密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
})

// 提交修改密码
const submitForm = async () => {
    try {
        await formRef.value.validate()

        if (form.value.oldPassword === form.value.newPassword) {
            ElMessage.error('新密码不能与原密码相同')
            return
        }

        const res = await updatePassword({
            oldPassword: form.value.oldPassword,
            newPassword: form.value.newPassword
        })

        if (res.code === 200) {
            ElMessage.success('密码修改成功，即将跳转到登录页')
            setTimeout(() => {
                authStore.logout()
                router.push('/login')
            }, 1500)
        } else {
            ElMessage.error(res.message || '密码修改失败')
        }
    } catch (error) {
        console.error('修改密码失败:', error)
        if (error instanceof Error) {
            ElMessage.error(error.message)
        }
    }
}

// 重置表单
const resetForm = () => {
    formRef.value?.resetFields()
}
</script>

<style scoped>
.mypassword {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.header {
    padding: 15px 0;
    font-size: 20px;
    color: #333;
}

.el-alert {
    margin-bottom: 16px;
}

.form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}
</style>
